<template>
    <view>
        <picker-view :value="value" @change="bindChange" indicator-style="height: 50px;" style="width: 100%; height: 100vh">
            <picker-view-column>
                <view style="line-height: 50px; text-align: center" v-for="(item, index) in province" :key="item.id">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
                <view style="line-height: 50px; text-align: center" v-for="(item, index) in city" :key="item.id">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
                <view style="line-height: 50px; text-align: center" v-for="(item, index) in area" :key="item.id">{{ item.name }}</view>
            </picker-view-column>
        </picker-view>

        <view class="bottom-fixed">
			<button type="primary" class="block radius-btn" @tap="onBindtap">确认</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            group: '',
            location: '',
            value: [],
            province: [],
            city: [],
            area: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log('=== group-area:onLoad:', JSON.parse(options.group));
        let group = JSON.parse(options.group);
        this.group = group
        this.location = group.location || ''
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        console.log('=== group-area:onReady:');
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        console.log('=== group-area:onShow:');
        this.getAllArea();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        console.log('--- group-area:onHide:');
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        console.log('--- group-area:onUnload:');
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取所有地区
        getAllArea() {
			uni.showLoading({
				title:'加载中'
			})
            getApp().globalData.api.getAllArea((result) => {
                console.log('获取所有地区:', result); // result.region.forEach(item => {
                // if(item.Code === 'CN'){

                let province = result; //item.children

                console.log('省列表：', province);
                let city;
                let area;
                let value = [];
                let locationArray = this.location.split(' ');

                if (locationArray.length > 1) {
                    for (let i = 0; i < province.length; i++) {
                        const item = province[i];

                        if (item.name === locationArray[0]) {
                            console.log('某个省对象：', item, i);
                            value.push(i);
                            city = item.children;
                            console.log('市列表：', city);
							if(item.children && item.children.length > 0){
								for (let j = 0; j < item.children.length; j++) {
								    const pro = item.children[j];
								    if (pro.name === locationArray[1]) {
								        console.log('某个市对象：', pro);
								        value.push(j);
								        area = pro.children;
								        console.log('县区列表：', area);
										if(pro.children && pro.children.length > 0){
											for (let m = 0; m < pro.children.length; m++) {
											    const obj = pro.children[m];
																			
											    if (obj.name === locationArray[2]) {
											        console.log('某个区对象：', obj);
											        value.push(m);
											        console.log('街列表：', obj.children); // break
											    }
											} // break
										}else{
											value.push(0)
										}
								    }
								} // break
							}else{
								value.push(0)
								value.push(0)
							}
                        }// end if
                    }// end for
                } else {
                    city = province[0].children;
                    area = province[0].children[0].children;
                    value = [0, 0, 0];
                }
				uni.hideLoading()

				this.province = province
				this.city = city
				this.area = area
				this.$nextTick(()=>{
					this.value = value
				}) // }
                // })
            });
        },

        bindChange(ev) {
            let value = ev.detail.value;
			
			if(this.value[0] !== value[0]){
				this.value[0] = value[0]
				this.value[1] = 0
				this.value[2] = 0
			}else if(this.value[1] !== value[1]){
				this.value[1] = value[1]
				this.value[2] = 0
			}else if(this.value[2] !== value[2]){
				this.value[2] = value[2]
			}
			
			let province = this.province;
			let city = province[this.value[0]].children ? province[this.value[0]].children : []
			let area = city[this.value[1]] ? (city[this.value[1]].children ? city[this.value[1]].children : []) : []
			this.province = province
			this.city = city
			this.area = area
        },

        // 表单提交
        onBindtap() {
            let province = this.province;
            let city = this.city;
            let area = this.area;
            let value = this.value;
            let location = province[value[0]].name + ' ' + (city[value[1]]?city[value[1]].name:'') + ' ' + (area[value[2]]?area[value[2]].name:'');
            let data = {
                id: this.group.id,
                location: location
            };
            getApp().globalData.api.updateUserGroup(data, (result) => {
                uni.navigateBack({
                    delta: 1
                });
            });
        }
    }
};
</script>
<style></style>
